
<template>
  <div class="box">
    <div class="content">
      <Row type='flex'
           justify='end'
           style='padding: 20px'>
        <Col><Button type="primary"
                @click="add"
                style="width:80px;">添加</Button></Col>
      </Row>
      <div class="content_list">
        <Table stripe :loading='loading'
               :columns="columns"
               class="table-list"
               :data="dataList"
               id="mygrid">
          <template slot-scope="{ row }"
                    slot="action">
            <i class="iconsys iconedit"
               title="编辑"
               @click="uptShow(row)">
            </i>
            <Poptip confirm
                    title="你确定要删除吗？"
                    class="poptip_del"
                    @on-ok="ok(row.categoryId)"
                    @on-cancel="cancel">
              <i class="iconsys icondel"
                 title="删除">
              </i>
            </Poptip>
          </template>
        </Table>
      </div>
      <div>
        <!-- <div class="content_page">
            <Page :total="total"  :current="data.offset"  @on-change="selectPage" :page-size="data.limit" class-name="page" show-sizer show-total/>
        </div> -->
      </div>
    </div>
    <Drawer v-model="modal1"
            :title="title"
            :mask-closable="true"
            class="shopDrawer"
            @on-close="closed"
            width="540">
      <Form ref="formValidate"
            :model="formValidate"
            :rules="ruleValidate"
            :label-width="100"
            class="shopDrawer_form">
        <FormItem label="商品类别名称:"
                  prop="categoryName">
          <Input v-model="formValidate.categoryName"
                 :maxlength="10"
                 @on-keyup="changeName"
                 placeholder="最多输入10字"
                 class="popupcontent_input"></Input>
        </FormItem>
        <FormItem class="shopDrawer_form_btn">
          <Button @click="handleReset"
                  style="width:72px">取消</Button>
          <Button type="primary"
                  @click="handleSubmit"
                  :disabled='isDisabled'
                  style="width:72px;margin-left:20px">确认</Button>
        </FormItem>
      </Form>
    </Drawer>

  </div>
</template>
<script>
import { getProductCategory, getProductAdd, getProductDel } from '@/api/setting'
export default {
  data () {
    return {
      loading: true,
      modal1: false,
      title: '添加水吧商品类别',
      categoryId: '',
      total: 10,
      isDelete: true,
      isDisabled: false,
      data: {
        // offset: 1,
        // limit: 10,
        parentId: 0,
        categoryType: 0,
        'merchantId': this.$store.state.user.merchantId,
        shopId: this.$route.query.id
      },
      columns: [
        {
          title: '商品类别名称',
          key: 'categoryName',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          width: 200,
          slot: 'action'
        }
      ],
      dataList: [
      ],
      showalert: false,
      formValidate: {
        categoryName: '',
        type: '',
        number: '',
        unitPrice: '',
        imgUrl: '',
        des: ''
      },
      ruleValidate: {
        categoryName: [{
          required: true, message: '商品类别名称不能为空', trigger: 'blur'
        }]
      }
    }
  },
  computed: {
  },
  created () {
  },
  mounted () {
    this.findList()
    if (!this.hasPermission('moms:setting:restzonegoodscategory')) {
      this.$router.replace({ name: 'error_401' })
    }
  },
  methods: {
    findList () {
      this.loading = true
      getProductCategory(this.data).then(res => {
        this.loading = false
        if (res.data.status === 200) {
          this.dataList = res.data.data
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    selectPage (page) {
    },
    add () {
      this.modal1 = true
      this.title = '添加水吧商品类别'
    },
    ok (idx) {
      if (this.isDelete) {
        if (!this.isDelete) {
          return
        }
        this.isDelete = false
        setTimeout(() => {
          getProductDel({
            categoryId: idx
          }).then(res => {
            this.isDelete = true
            if (res.data.status === 200) {
              this.$Message.success('删除成功')
              this.findList()
            } else {
              this.$Message.error(`${res.data.error}`)
            }
          })
        }, 200)
      }
    },
    cancel () {

    },
    uptShow (data) {
      this.modal1 = true
      this.title = '编辑水吧商品类别'
      this.categoryId = data.categoryId
      this.formValidate.categoryName = data.categoryName + ''
    },
    detailsShow (index) {
      this.modal1 = true
    },
    closed () {
      this.modal1 = false
      this.$refs.formValidate.resetFields()
    },
    changeName () {
      this.formValidate.categoryName = this.formValidate.categoryName.replace(/\s+/g, '')
    },
    // 重置
    handleReset () {
      this.modal1 = false
      this.$refs.formValidate.resetFields()
    },
    // 提交
    handleSubmit () {
      this.$refs.formValidate.validate((val) => {
        if (val) {
          if (this.isDisabled) {
            return
          }
          this.isDisabled = true
          if (this.title === '添加水吧商品类别') {
            setTimeout(() => {
              getProductAdd({
                'merchantId': this.$store.state.user.merchantId,
                shopId: this.$route.query.id,
                categoryType: 0,
                categoryName: this.formValidate.categoryName,
                parentId: 0
              }).then(res => {
                this.isDisabled = false
                if (res.data.status === 200) {
                  this.$Message.success('新增成功')
                  this.findList()
                  this.modal1 = false
                  this.$refs.formValidate.resetFields()
                } else {
                  this.$Message.error(`${res.data.error}`)
                }
              })
            }, 200)
          } else {
            setTimeout(() => {
              getProductAdd({
                'merchantId': this.$store.state.user.merchantId,
                shopId: this.$route.query.id,
                categoryType: 0,
                categoryId: this.categoryId,
                categoryName: this.formValidate.categoryName,
                parentId: 0
              }).then(res => {
                this.isDisabled = false
                if (res.data.status === 200) {
                  this.$Message.success('更新成功')
                  this.findList()
                  this.modal1 = false
                  this.$refs.formValidate.resetFields()
                } else {
                  this.$Message.error(`${res.data.error}`)
                }
              })
            }, 200)
          }
        }
      })
    }
  }

}
</script>
<style lang="less" scoped>
.box {
  .content_page {
    height: 80px;
    line-height: 80px;
    display: flex;
    padding-right: 20px;
    flex-direction: row;
    justify-content: flex-end;
  }
  .popupcontent_input {
    width: 280px;
  }
}
</style>
<style>
.shopDrawer .shopDrawer_form {
  width: 380px;
  margin: auto;
  padding-top: 16px;
}
.shopDrawer .shopDrawer_form .shopDrawer_form_btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 16px;
  border-top: 1px solid #e8eaec;
}
.shopDrawer .shopDrawer_form .shopDrawer_form_btn .ivu-form-item-content {
  text-align: right;
  padding-right: 24px;
}
.poptip_del .ivu-poptip-body .ivu-icon {
  left: 18px;
}
</style>
